import { Card, Icon } from "annar";
import * as React from "react";
import { usePageEvent } from "remax/macro";
import { View, getStorageSync, OpenData, request } from "remax/wechat";
import styles from "./index.css";
import ContactCard from "@vant/weapp/lib/ContactCard";
import { Tag, Row, Col, Tabs } from "annar";
import RecycleView, { Item } from "remax-recycle-view/lib/src/";
import { ImageCard } from "@/component/image-card";
import { Video } from "@/type/video";
import { origin } from "@/config/config";
import { LongScrollView } from "@/component/long-scroll-view";
import { ProfileInfo } from "@/type/profileInfo";
import { Image } from "remax/wechat";

const { TabContent } = Tabs;

const tabs = [
  {
    key: "0",
    label: "all",
    title: "作品",
  },
  {
    key: "1",
    label: "like",
    title: "喜欢",
  },
];

// let videoList: Video[] = [
//     {
//         id: 1,
//         videoDesc: "huahug",
//         likeCounts: 1,
//         nickName: 'afaa',
//         userAvatar: '',
//         coverPath: '',
//         videoPath: '',
//     },
//     {
//         id: 2,
//         videoDesc: "huahug",
//         likeCounts: 1,
//         nickName: 'afaa',
//         userAvatar: '',
//         coverPath: '',
//         videoPath: '',
//     },
//     {
//         id: 3,
//         videoDesc: "huahug",
//         likeCounts: 100,
//         nickName: 'afaa',
//         userAvatar: '',
//         coverPath: '',
//         videoPath: '',
//     }

// ]

export default () => {
  const [stateKey, setStateKey] = React.useState("0");
  const [videoList, setVideoList] = React.useState<Video[]>([]);
  const [userInfo, setUserInfo] = React.useState<WechatMiniprogram.UserInfo>();
  const [userName, setUserName] = React.useState<string>();
  const [profileInfo, setProfileInfo] = React.useState<ProfileInfo>({
    id: "0",
    avatar: "",
    nickName: "",
    sex: "",
    fansCounts: 0, // 粉丝数
    followCounts: 0, // 关注数
    receiveLikeCounts: 0, // 获赞数
    videoList: [],
  });

  let userInfo1: WechatMiniprogram.UserInfo = {
    avatarUrl: "",
    city: "",
    country: "",
    gender: 0,
    language: "en",
    nickName: "",
    province: "",
  };
  let loginInfo: any = {};

  const changeKey = (i: { key: string; label: string; title: string }) => {
    setStateKey(i.key);
    let label = i.key === "0" ? "all" : "like";

    request({
      method: "GET",
      url: `${origin}/user/info?label=${label}`,
      header: {
        token: loginInfo.token,
      },
      success: (res) => {
        setProfileInfo(res.data.data);
      },
    });
  };

  try {
    loginInfo = getStorageSync("loginInfo");
    userInfo1 = getStorageSync("userInfo");
  } catch (e) {
    console.log(e);
  }

  usePageEvent("onLoad", () => {
    request({
      url: `${origin}/user/info?label=all`,
      header: {
        token: loginInfo.token,
      },
      success: (res) => {
        if (res.data.code === 200) {
          setProfileInfo(res.data.data);

          wx.getImageInfo({
            src: userInfo1.avatarUrl,
            success: (res) => {
              console.log(res.path);
              wx.uploadFile({
                url: `${origin}/user/update`, //仅为示例，非真实的接口地址
                filePath: res.path,
                name: "file",
                header: {
                  token: loginInfo.token,
                },
                formData: {
                  userName: userInfo1.nickName,
                  gender: userInfo1.gender,
                },
                success(res) {
                  const data = res.data;
                  //do something
                },
              });
            },
            fail: (res) => {
              console.log(res);
            },
          });

          // setVideoList(res.data.data.videoList)
        } else if (res.data.code !== 200) {
          // 发送提示通知
          console.log(res.data.msg);
        }
      },
    });
  });

  const showFollowList = () => {
    wx.navigateTo({
      url: `/pages/follow-list/index?state=0&userId=${profileInfo.id}`,
    });
  };

  const showFanList = () => {
    wx.navigateTo({
      url: `/pages/follow-list/index?state=1&userId=${profileInfo.id}`,
    });
  };

  return (
    <Card>
      <View className={styles.box}>
        <View className={styles.box_top}>
          <Row>
            <Col>
              <View className={styles.avatar}>
                <Image
                  src={userInfo1.avatarUrl}
                  style={{ height: "inherit", width: "inherit" }}
                />
                <View className={styles.nickName}>{userInfo1.nickName}</View>
              </View>
            </Col>
          </Row>
          <View className={styles.nickName}>{profileInfo.nickName}</View>
          <View className={styles.id_style}>id: {profileInfo.id}</View>
          {userInfo1.gender === 0 && <Tag color="blue">男</Tag>}
          {userInfo1.gender === 1 && <Tag color="red">女</Tag>}

          <Row className={styles.info}>
            <Col className={styles.info_item1} span={8}>
              <View
                onTap={() => {
                  showFollowList();
                }}
              >
                <View className={styles.info_item_text}>关注</View>
                <View className={styles.info_item_num}>
                  {profileInfo.followCounts}
                </View>
              </View>
            </Col>
            <Col className={styles.info_item} span={8}>
              <View>
                <View className={styles.info_item_text}>获赞</View>
                <View className={styles.info_item_num}>
                  {profileInfo.receiveLikeCounts}
                </View>
              </View>
            </Col>
            <Col className={styles.info_item1} span={8}>
              <View onTap={showFanList}>
                <View className={styles.info_item_text}>粉丝</View>
                <View className={styles.info_item_num}>
                  {profileInfo.fansCounts}
                </View>
              </View>
            </Col>
          </Row>
        </View>
      </View>
      <Tabs type="card" onTabClick={changeKey} activeKey={stateKey}>
        {tabs.map((tab) => (
          <TabContent key={tab.key} tab={tab.title}>
            <Card>
              <LongScrollView data={profileInfo.videoList} />
            </Card>
          </TabContent>
        ))}
      </Tabs>
    </Card>
  );
};
